<template>
  <div class="message">
    <Navheader :activeName="'消息'"></Navheader>
    <div class="wrapper">
      <div class="container">
        <el-row type="flex" justify="space-between">
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <ul>
              <li class="message-item" :class="{active: msg === 'message'}" @click="choiceItem('message','收到的评论')">
                <a>
                  <i class="iconfont">&#xe660;</i>
                  <span>评论</span>
                </a>
              </li>
              <li class="message-item" :class="{active: msg === 'letter'}" @click="choiceItem('letter')">
                <a>
                  <i class="iconfont">&#xe668;</i>
                  <span>简信</span>
                </a>
              </li>
              <li class="message-item" :class="{active: msg === 'apply'}" @click="choiceItem('apply')">
                <a>
                  <i class="iconfont">&#xe667;</i>
                  <span>投稿申请</span>
                </a>
              </li>
              <li class="message-item " :class="{active: msg === 'like'}" @click="choiceItem('like')">
                <a>
                  <i class="iconfont">&#xe604;</i>
                  <span>喜欢和赞</span>
                </a>
              </li>
              <li class="message-item " :class="{active: msg === 'follow'}" @click="choiceItem('follow')">
                <a>
                  <i class="iconfont">&#xe719;</i>
                  <span>关注</span>
                </a>
              </li>
              <li class="message-item " :class="{active: msg === 'pay'}" @click="choiceItem('pay')">
                <a>
                  <i class="iconfont">&#xe625;</i>
                  <span>赞赏和付费</span>
                </a>
              </li>
              <li class="message-item " :class="{active: msg === 'other'}" @click="choiceItem('other')">
                <a>
                  <i class="iconfont">&#xe61e;</i>
                  <span>其他提醒</span>
                </a>
              </li>
            </ul>
          </el-col>
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <MessageSlot :title="title" :MessageDate="messageDate">

            </MessageSlot>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import MessageSlot from '../components/MessageSlot'
import Navheader from '../components/Navheader'

export default {
  name: 'Message',
  data () {
    return {
      title: '收到的评论',
      msg: 'message',
      messageDate: []
    }
  },
  components: { // 模板加载
    MessageSlot,
    Navheader
  },
  watch: {
    $route (to) {
      this.titleChange(to)
    }
  },
  mounted () { // 挂载
    this.msg = this.$route.params.msg
  },
  methods: { // 方法
    titleChange (to) {
      switch (to.params.msg) {
        case 'message': {
          this.title = '收到的评论'
          this.msg = 'message'
          this.messageDate = [{
            id: 1,
            img: '/author/author1.webp',
            name: '简宝玉',
            message: '叮——你有一份年终总结待查收！新年的钟声已经响起，2019年你在简书都留下了哪些痕迹呢？快点击',
            time: '01.02 22:36'
          }]
          return
        }
        case 'letter': {
          this.title = '全部简信'
          this.msg = 'letter'
          this.messageDate = []
          return
        }
        case 'apply': {
          this.title = '收到的投稿请求'
          this.msg = 'apply'
          this.messageDate = []
          return
        }
        case 'like': {
          this.title = '收到的喜欢和赞'
          this.msg = 'like'
          this.messageDate = []
          return
        }
        case 'follow': {
          this.title = '全部关注'
          this.msg = 'follow'
          this.messageDate = []
          return
        }
        case 'pay': {
          this.title = '赞赏和付费'
          this.msg = 'pay'
          this.messageDate = []
          return
        }
        case 'other': {
          this.title = '其它提醒'
          this.msg = 'other'
          this.messageDate = []
          return
        }
        default: {
          this.title = '收到的评论'
          this.msg = 'message'
        }
      }
    },
    choiceItem (msg) {
      this.$router.push('/message/' + msg)
    }
  }
}
</script>

<style lang="scss">
  .message {
    .wrapper {
      .container {
        padding-top: 30px;

        .message-item {
          border-radius: 5px;

          a {
            height: auto;
            padding: 10px 25px;
            line-height: 30px;
            display: block;
          }

          i {
            margin-right: 15px;
            font-size: 24px;
            color: #ea6f5a;
            vertical-align: middle;
          }

          span {
            font-size: 15px;
            vertical-align: middle;
          }

          &.active, &:hover {
            background-color: #f0f0f0;
          }
        }
      }
    }
  }
</style>
